<template>
	<view class="container">
		<view class="title">
			你有什么问题和建议想和我们说？
		</view>
		<textarea v-model="form.content" placeholder-style=" color:#B1B0B1;font-size:28rpx" placeholder="你的意见就是我们前进的动力..." maxlength="500" />
		<!-- <view class="upload_img">
		   	<image src="../../static/img/photo.png" mode=""></image>
		</view> -->
		<view style="display: flex; ">
			<view class="upload_img" v-if="!form.suggestFile[0]" @click="upload()">
				<image  src="../../static/img/photo.png" mode=""></image>
			</view>
			<view v-else v-for="(item,index) in form.suggestFile" :key="index" class="upload_img" @click="upload()">
					<image :src="  item" mode=""></image>
			</view>
		</view>
		<view class="description">
		   	请你详述描述你在使用过程中遇到的问题，有利于我们快速定 位问题性质以便于更快速解决你的问题.感谢你的宝贵建议.我 们会认真评估
		</view>
		<HandleBtn btnName="立即提交" @click.native="userSuggest()" class="btn"></HandleBtn>
	</view>
</template>

<script>
	import HandleBtn from "../../components/handleBtn.vue"
	export default {
		components:{
			HandleBtn
		},
		data() {
			return {
				form:{
					content:"",
					suggestFile:[],
				}
			}
		},
		methods: {
			//建议
			userSuggest(){
				this.$utils.requert({url:'userSuggest',data:this.form,type:'post'}).then(res=>{
						if(res.code === 1 ){
							this.$utils.showLayer("我们已收到您的反馈")
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/myCenter/myCenter"
								}) 
							},1000)
							  
						 }else{
							 this.$utils.showLayer(res.message)
						}
				});
			},
			//图片上传
			upload(){
				   uni.chooseImage({
					count: 2,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res=> {
						const file = res.tempFilePaths[0]
						const  token  = uni.getStorageSync('token')
						uni.uploadFile({
							url: this.$utils.domain+'/api/api/uploadImg', //仅为示例，非真实的接口地址
							filePath: file,
							
							name: 'file',
							header:{
								'accessToken':token
							},
							formData: {
								'type': '2'
							},
							success: (res) => {
								var res = JSON.parse(res.data)
								this.imgsFile =	this.form.suggestFile.push(res.data.src)
								console.log(this.form.suggestFile)
							}
						});
					},
					error : function(e){
					 // console.log(e);		
					}
				  });
			},
		}
	}
</script>
<style>
	page {
		width: 100%;
		background-color: #f5f4f6;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		padding-bottom: 60rpx;
		padding:0 24rpx;
		box-sizing: border-box;
	}
	.title{
		font-size: 32rpx;
		color: #FB8408;
		margin-bottom: 24rpx;
		margin-top: 36rpx;
	}
	textarea{
		width: 100%;
		padding:30rpx 37rpx;
		background-color: #fff;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		min-height: 360rpx;
		border-radius: 10rpx;
	}
	.upload_img{
		background-color: #fff;
		width: 200rpx;
		height: 200rpx;
		text-align: center;
		border-radius: 10rpx;
		/* position: absolute;
		top:310rpx;
		left:56rpx; */
		/* margin-left: 20rpx; */
		margin-bottom: 20rpx;
		z-index: 100;
	}
	.upload_img image{
		width:100%;
		height: 100%;
		/* margin-top: 62rpx; */
	}
	.description{
		font-size: 24rpx;
		color: #B1B0B1;
	}
	.btn{
		margin-top: 80rpx;
	}

</style>
